<%@ page contentType="text/html;charset=UTF-8" language="java" pageEncoding="UTF-8" %>

<!DOCTYPE html>

<html lang="en" class="material-style layout-fixed">

<head>
    <title>Bhumlu | B4+ admin template by Srthemesvilla</title>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">
    <meta name="description" content="Bhumlu Bootstrap admin template made using Bootstrap 4, it has tons of ready made feature, UI components, pages which completely fulfills any dashboard needs." />
    <meta name="keywords" content="Bhumlu, bootstrap admin template, bootstrap admin panel, bootstrap 4 admin template, admin template">
    <meta name="author" content="Srthemesvilla" />
    <link rel="icon" type="image/x-icon" href="assets/img/favicon.ico">

    <!-- Google fonts -->
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">

    <!-- Icon fonts -->
    <link rel="stylesheet" href="assets/fonts/fontawesome.css">
    <link rel="stylesheet" href="assets/fonts/ionicons.css">
    <link rel="stylesheet" href="assets/fonts/linearicons.css">
    <link rel="stylesheet" href="assets/fonts/open-iconic.css">
    <link rel="stylesheet" href="assets/fonts/pe-icon-7-stroke.css">
    <link rel="stylesheet" href="assets/fonts/feather.css">

    <!-- Core stylesheets -->
    <link rel="stylesheet" href="assets/css/bootstrap-material.css">
    <link rel="stylesheet" href="assets/css/shreerang-material.css">
    <link rel="stylesheet" href="assets/css/uikit.css">

    <!-- Libs -->
    <link rel="stylesheet" href="assets/libs/perfect-scrollbar/perfect-scrollbar.css">

</head>

<body>
    <!-- [ Preloader ] Start -->
    <div class="page-loader">
        <div class="bg-primary"></div>
    </div>
    <!-- [ Preloader ] Ebd -->

    <!-- [ Layout wrapper ] Start -->
    <div class="layout-wrapper layout-2">
        <div class="layout-inner">
            <!-- [ Layout sidenav ] Start -->
            <jsp:include page="common/left-menu.jsp"/>
            <!-- [ Layout sidenav ] End -->
            <!-- [ Layout container ] Start -->
            <div class="layout-container">
                <jsp:include page="common/header.jsp"/>
                <!-- [ Layout navbar ( Header ) ] End -->

                <!-- [ Layout content ] Start -->
                <div class="layout-content">

                    <!-- [ content ] Start -->
                    <div class="container-fluid flex-grow-1 container-p-y">
                        <h4 class="font-weight-bold py-3 mb-0">Typography</h4>
                        <div class="text-muted small mt-0 mb-4 d-block breadcrumb">
                            <ol class="breadcrumb">
                                <li class="breadcrumb-item"><a href="#"><i class="feather icon-home"></i></a></li>
                                <li class="breadcrumb-item active" >Typography</li>
                            </ol>
                        </div>
                        <div class="row">
                            <div class="col-sm-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Typography</h6>
                                    </div>
                                    <div class="card-body">
                                        <h1>h1. Bootstrap heading <small class="text-muted"> Secondary text</small></h1>
                                        <h2>h2. Bootstrap heading <small class="text-muted"> Secondary text</small></h2>
                                        <h3>h3. Bootstrap heading <small class="text-muted"> Secondary text</small></h3>
                                        <h4>h4. Bootstrap heading <small class="text-muted"> Secondary text</small></h4>
                                        <h5>h5. Bootstrap heading <small class="text-muted"> Secondary text</small></h5>
                                        <h6>h6. Bootstrap heading <small class="text-muted"> Secondary text</small></h6>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Display headings</h6>
                                    </div>
                                    <div class="card-body">
                                        <h1 class="display-1">Display 1</h1>
                                        <h1 class="display-2">Display 2</h1>
                                        <h1 class="display-3">Display 3</h1>
                                        <h1 class="display-4">Display 4</h1>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Paragraph</h6>
                                    </div>
                                    <div class="card-body">
                                        <p>Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.</p>
                                        <p class="lead">Lorem ipsum dolor sit amet, ad tibique blandit qui, error zril eleifend ut vel. Et paulo labores molestiae has, ei eos virtute dolorem.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Inline text elements</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Marked text -->
                                        <p>You can use the mark tag to<mark>highlight</mark> text.</p>

                                        <!-- Deleted text -->
                                        <p><del>This line of text is meant to be treated as deleted text.</del></p>

                                        <!-- Strikethrough text -->
                                        <p><s>This line of text is meant to be treated as no longer accurate.</s></p>

                                        <!-- Underlined text -->
                                        <p><u>This line of text will render as underlined</u></p>

                                        <!-- Small text -->
                                        <p><small>This line of text is meant to be treated as fine print.</small></p>

                                        <!-- Bold -->
                                        <p><strong>rendered as bold text</strong></p>

                                        <!-- Italics -->
                                        <p><em>rendered as italicized text</em></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Abbreviations</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Basic abbreviation -->
                                        <p>An abbreviation of the word attribute is<abbr title="attribute">attr</abbr>.</p>

                                        <!-- Initialism -->
                                        <p><abbr title="HyperText Markup Language" class="initialism">HTML</abbr> is the best thing since sliced bread.</p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Addresses</h6>
                                    </div>
                                    <div class="card-body">
                                        <address>
                                            <strong>Twitter, Inc.</strong>
                                            <br> 1355 Market Street, Suite 900
                                            <br> San Francisco, CA 94103
                                            <br>
                                            <abbr title="Phone">P:</abbr> (123) 456-7890
                                        </address>

                                        <address>
                                            <strong>Full Name</strong>
                                            <br>
                                            <a href="mailto:#">first.last@example.com</a>
                                        </address>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Blockquotes</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Default blockquote -->
                                        <blockquote class="blockquote">
                                            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                        </blockquote>

                                        <!-- Blockquote options -->
                                        <blockquote class="blockquote">
                                            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer class="blockquote-footer">Someone famous in
                                                <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>

                                        <blockquote class="blockquote text-center">
                                            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer class="blockquote-footer">Someone famous in
                                                <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>

                                        <blockquote class="blockquote text-right">
                                            <p class="mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer posuere erat a ante.</p>
                                            <footer class="blockquote-footer">Someone famous in
                                                <cite title="Source Title">Source Title</cite>
                                            </footer>
                                        </blockquote>
                                    </div>
                                </div>
                            </div>
                            <div class="col-sm-12">
                                <h4>Lists</h4>
                            </div>
                            <div class="col-md-4">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Unordered</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Unordered -->
                                        <ul>
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Consectetur adipiscing elit</li>
                                            <li>Integer molestie lorem at massa</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                            <li>Nulla volutpat aliquam velit
                                                <ul>
                                                    <li>Phasellus iaculis neque</li>
                                                    <li>Purus sodales ultricies</li>
                                                    <li>Vestibulum laoreet porttitor sem</li>
                                                    <li>Ac tristique libero volutpat at</li>
                                                </ul>
                                            </li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Ordered</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Ordered -->
                                        <ol>
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Consectetur adipiscing elit</li>
                                            <li>Integer molestie lorem at massa</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                            <li>Nulla volutpat aliquam velit</li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                        </ol>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-4">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Unstyled</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Unstyled -->
                                        <ul class="list-unstyled">
                                            <li>Lorem ipsum dolor sit amet</li>
                                            <li>Consectetur adipiscing elit</li>
                                            <li>Integer molestie lorem at massa</li>
                                            <li>Facilisis in pretium nisl aliquet</li>
                                            <li>Nulla volutpat aliquam velit
                                                <ul>
                                                    <li>Phasellus iaculis neque</li>
                                                    <li>Purus sodales ultricies</li>
                                                    <li>Vestibulum laoreet porttitor sem</li>
                                                    <li>Ac tristique libero volutpat at</li>
                                                </ul>
                                            </li>
                                            <li>Faucibus porta lacus fringilla vel</li>
                                            <li>Aenean sit amet erat nunc</li>
                                            <li>Eget porttitor lorem</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Inline</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Inline -->
                                        <ul class="list-inline">
                                            <li class="list-inline-item">Lorem ipsum</li>
                                            <li class="list-inline-item">Phasellus iaculis</li>
                                            <li class="list-inline-item">Nulla volutpat</li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Description</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Description -->
                                        <dl>
                                            <dt>Description lists</dt>
                                            <dd>A description list is perfect for defining terms.</dd>
                                            <dt>Euismod</dt>
                                            <dd>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</dd>
                                            <dd>Donec id elit non mi porta gravida at eget metus.</dd>
                                            <dt>Malesuada porta</dt>
                                            <dd>Etiam porta sem malesuada magna mollis euismod.</dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-12">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Horizontal description</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Horizontal description -->
                                        <dl class="row">
                                            <dt class="col-sm-3">Description lists</dt>
                                            <dd class="col-sm-9">A description list is perfect for defining terms.</dd>

                                            <dt class="col-sm-3">Euismod</dt>
                                            <dd class="col-sm-9">
                                                <p>Vestibulum id ligula porta felis euismod semper eget lacinia odio sem nec elit.</p>
                                                <p>Donec id elit non mi porta gravida at eget metus.</p>
                                            </dd>

                                            <dt class="col-sm-3">Malesuada porta</dt>
                                            <dd class="col-sm-9">Etiam porta sem malesuada magna mollis euismod.</dd>

                                            <dt class="col-sm-3 text-truncate">Truncated term is truncated</dt>
                                            <dd class="col-sm-9">Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</dd>

                                            <dt class="col-sm-3">Nesting</dt>
                                            <dd class="col-sm-9">
                                                <dl class="row">
                                                    <dt class="col-sm-4">Nested definition list</dt>
                                                    <dd class="col-sm-8">Aenean posuere, tortor sed cursus feugiat, nunc augue blandit nunc.</dd>
                                                </dl>
                                            </dd>
                                        </dl>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Code</h6>
                                    </div>
                                    <div class="card-body">
                                        <!-- Inline -->
                                        <p>For example, <code>&lt;section&gt;</code> should be wrapped as inline.</p>

                                        <!-- User input -->
                                        <p>To switch directories, type <kbd>cd</kbd> followed by the name of the directory.<br> To edit settings, press <kbd><kbd>ctrl</kbd> + <kbd>,</kbd></kbd></p>

                                        <!-- Code block -->
                                        <pre>&lt;p&gt;Sample text here...&lt;/p&gt;</pre>

                                        <!-- Variables -->
                                        <p><var>y</var> = <var>m</var><var>x</var> + <var>b</var></p>

                                        <!-- Sample output -->
                                        <p><samp>This text is meant to be treated as sample output from a computer program.</samp></p>
                                    </div>
                                </div>
                            </div>
                            <div class="col-md-6">
                                <div class="card mb-4">
                                    <div class="card-header">
                                        <h6 class="card-header-title mb-0">Figures</h6>
                                    </div>
                                    <div class="card-body">
                                        <figure class="figure" style="max-width: 25rem">
                                            <img src="assets/img/bg/1.jpg" class="figure-img img-fluid" alt="A generic square placeholder image with rounded corners in a figure.">
                                            <figcaption class="figure-caption">A caption for the above image.</figcaption>
                                        </figure>
                                    </div>
                                </div>
                            </div>
                        </div>

                    </div>
                    <!-- [ content ] End -->

                    <!-- [ Layout footer ] Start -->
                    <nav class="layout-footer footer bg-white">
                        <div class="container-fluid d-flex flex-wrap justify-content-between text-center container-p-x pb-3">
                            <div class="pt-3">
                                <span class="footer-text font-weight-semibold">&copy; <a target="_blank" href="http://www.mobanwang.com/" title="网页模板">网页模板</a></span>
                            </div>
                            <div>
                                <a href="javascript:" class="footer-link pt-3">About Us</a>
                                <a href="javascript:" class="footer-link pt-3 ml-4">Help</a>
                                <a href="javascript:" class="footer-link pt-3 ml-4">Contact</a>
                                <a href="javascript:" class="footer-link pt-3 ml-4">Terms &amp; Conditions</a>
                            </div>
                        </div>
                    </nav>
                    <!-- [ Layout footer ] End -->

                </div>
                <!-- [ Layout content ] Start -->

            </div>
            <!-- [ Layout container ] End -->

        </div>

        <!-- Overlay -->
        <div class="layout-overlay layout-sidenav-toggle"></div>
    </div>
    <!-- [ Layout wrapper ] end -->

    <!-- Core scripts -->
    <script src="assets/js/pace.js"></script>
    <script src="assets/js/jquery-3.3.1.min.js"></script>
    <script src="assets/libs/popper/popper.js"></script>
    <script src="assets/js/bootstrap.js"></script>
    <script src="assets/js/sidenav.js"></script>
    <script src="assets/js/layout-helpers.js"></script>
    <script src="assets/js/material-ripple.js"></script>

    <!-- Libs -->
    <script src="assets/libs/perfect-scrollbar/perfect-scrollbar.js"></script>

    <!-- Demo -->
    <script src="assets/js/demo.js"></script><script src="assets/js/analytics.js"></script>

</body>

</html>
